<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <!-- import CSS -->
    <link rel="stylesheet" href="element.css">
    <link rel="stylesheet" href="./common.css">
    <style>
        *{margin: 0;padding: 0;}
        .el-image__inner{
            vertical-align:middle
        }
        #app{height: 100vh;overflow: hidden;}
    </style>
</head>
<body>
    <div id="app">
        <!-- 导航栏 -->
        <!-- <my-header>
            <my-drawer></my-drawer>            
        </my-header> -->
        <div>
            <el-row class="headerBox" :gutter="20" :class="{'mainBg':pageId=='detail','detail1':true}">
                <el-col :span="4">
                    <div class="el-menu-item lineHeight34">
                        <a href="index.html"><el-image :src="'./img/logo1.png'" :fit="'fit'"></el-image></a>
                    </div>
                </el-col>
                <el-col :span="16"><div class="grid-content bg-purple">
                    <div class="myNav el-menu--horizontal el-menu">
                        <template v-for="(item,j) in list">
                        <div @mouseenter="hoverItem = j" :key="j" slot="reference" class="el-menu-item" @click="changePage(item)" :class="{'actived':pageId===item.id}">
                            <span class="inlineBlock">{{item.text}}</span>                
                            <!-- <slot v-if="item.id===1"></slot> -->
                            <div class="drawer" v-if="j==hoverItem && proList[hoverItem-1]">
                                <!-- <el-row type="flex" v-for="j in 2" :key="j" justify="center"> -->
                                        <el-col v-for="(item1,i) in proList[hoverItem-1].goods" :key="i" :span="5"><div class="grid-content bg-purple">
                                            <!-- <a href="index.html?page=1"> -->
                                                <a class="productItem" href="detail.html">
                                                    <el-image src="./img/compute.png"></el-image>
                                                    <div class="describe alignCenter">{{item1.goods_name}}<span class="block">{{item1.goods_key}}</span></div>
                                                </a>
                                                <!-- </a> -->
                                        </div></el-col>
                                    
                                <!-- </el-row> -->
                            </div>
                        </div>
                        </template>
                    </div></div>
                </el-col>
                <el-col class="rightBox" :span="4">
                    <div class="el-menu-item mainColor alignRight">
                        <span class="pointer" @click="changeLanguage(lang)"><span class="iconfont">&#xe623;</span>{{lang?"EN":'中文'}}</span>
                    </div></el-col>
            </el-row>
            <div style="height:82px;width:100%"></div></div>
        <video width="100%" autoplay muted loop>
            <source src="img/video.mp4" type="video/mp4">
            <!-- <source src="movie.ogg" type="video/ogg">
            <source src="https://upload.wikimedia.org/wikipedia/commons/8/87/Schlossbergbahn.webm" type="video/webm">
            <object data="movie.mp4" width="100%">
              <embed src="movie.swf" width="100%">
            </object>
            <source id="source" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"  type="application/x-mpegURL"> -->
        </video>
        
        
        
    </div>
    <script src="./localLang.js"></script>
    <script src="js/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@1.2.7/dist/hls.js"></script> -->
  <!-- import JavaScript -->
    <script src="js/element-ui.js"></script>
    <script src="./drawer.js"></script>
    <script src="./header.js"></script>
    <script>
        // var HLS = window.Hls;
        // let hls = new HLS()
        new Vue({
            el: '#app',
            data: {
                draggable: true,
                resizable: false,
                visible:false,
                pageId:1,
                lang:Number(localStorage.getItem('langType')),
                hoverItem:0,
                proList:[
                    {"gc_id":"16","gc_name":"MAX N","goods":[{"goods_id":"24","goods_name":"MAX N96","goods_key":"MAX N96","goods_desc":"MAX N96","goods_body":""}]},
                    {"gc_id":"17","gc_name":"MAX PRO","goods":[{"goods_id":"23","goods_name":"MAX PRO","goods_key":"Intel\u00ae Alder Lake-N95 Processor","goods_desc":"","goods_body":""}]}] 
            },
            mounted(){
                // this.start('1.m3u8')
            },
            computed:{
                list(){
                    return [
                    {id:0,text:'Home',href:''},

                    {id:1,text:'MAX N',href:''},
                    {id:2,text:'MAX PRO',href:'detail.html'},

                    {id:3,text:LANG[this.lang].quality,href:'qualification.html'},
                    {id:4,text:LANG[this.lang].about,href:'about.html'},
                    {id:5,text:LANG[this.lang].support,href:'support.html'},
                ]},
            },
            methods: {
               start(url){
                    if (HLS.isSupported()) {
                        var video = document.getElementById('video');
                        hls.attachMedia(video);
                        hls.loadSource(url);
                        hls.on(HLS.Events.MANIFEST_PARSED, () => {
                        video.play();
                        console.log("加载成功");
                        });
                        hls.on(HLS.Events.ERROR, (event, data) => {
                        console.log("加载失败");
                        });
                    }
               },
               changePage(item){
                    // $emit('changePage',id)
                    if(item.id===1)return
                    window.location.href=item.href
                },
                changeLanguage(){
                    this.lang = Number(!Number(localStorage.getItem('langType')));
                    // this.$parent.parentChangeLang(this.lang?'zh-CN':'en')
                    localStorage.setItem('langType',this.lang)
                    window.location.reload()
                }
            }   
        });
      </script>
</body>
</html>